feat(svg): adds sprite hash manifest for cache busting #471
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements a webpack plugin that generates a JSON file containing content hashes for SVG sprite files. This allows for cache busting of sprite files by appending the hash as a query parameter to the sprite URL. The `Svg` service is updated to read the hash from the generated JSON and append it to the sprite URL.
Reviewer's GuideAdds a Webpack plugin that generates a JSON manifest of content hashes for SVG sprite files and updates the Svg service to read this manifest and append a cache-busting query parameter to sprite URLs. Sequence diagram for Webpack build generating sprite-hashes.jsonsequenceDiagram
participant WebpackCompiler
participant SpriteHashPlugin
participant FileSystem
WebpackCompiler->>SpriteHashPlugin: trigger afterEmit hook
SpriteHashPlugin->>FileSystem: exists(spriteDir)
alt spriteDir does not exist
SpriteHashPlugin-->>WebpackCompiler: log warning and callback
else spriteDir exists
SpriteHashPlugin->>FileSystem: readDir(spriteDir)
FileSystem-->>SpriteHashPlugin: list svgFiles
loop for each svgFile
SpriteHashPlugin->>FileSystem: readFile(filePath)
FileSystem-->>SpriteHashPlugin: svgContent
SpriteHashPlugin->>SpriteHashPlugin: compute md5 hash
SpriteHashPlugin->>SpriteHashPlugin: store relativePath -> hash
end
SpriteHashPlugin->>FileSystem: writeFile(outputFile, hashesJson)
FileSystem-->>SpriteHashPlugin: write complete
SpriteHashPlugin-->>WebpackCompiler: callback
end
Sequence diagram for Svg service resolving sprite URL with hashsequenceDiagram
participant Template
participant Svg as SvgService
participant FileSystem
Template->>Svg: get_the_icon(icon_class, additionnal_classes)
Svg->>Svg: normalize icon_class to icon_slug
Svg->>Svg: build css classes
Svg->>Svg: get_sprite_hash(sprite_name)
Svg->>FileSystem: get_theme_file_path(sprite_hash_file)
Svg->>FileSystem: is_readable(sprite_hash_file)
alt sprite-hashes.json not readable
Svg-->>Svg: return empty hash string
else readable
Svg->>FileSystem: file_get_contents(sprite_hash_file)
FileSystem-->>Svg: jsonContent
Svg->>Svg: json_decode(jsonContent)
alt hash for sprite exists
Svg-->>Svg: return ?hash
else missing hash
Svg-->>Svg: return empty hash string
end
end
Svg->>Svg: build spriteUrl with optional hash
Svg-->>Template: svg markup with use href spriteUrl#icon_slug
Class diagram for SpriteHashPlugin and updated Svg serviceclassDiagram
class SpriteHashPlugin {
+object options
+SpriteHashPlugin(options)
+apply(compiler)
}
class Svg {
+get_the_icon(icon_class, additionnal_classes)
+allow_svg_tag(tags)
+get_sprite_hash(sprite_name)
}
class FileSystem {
+readFile(path)
+writeFile(path, content)
+readDir(path)
+exists(path)
}
SpriteHashPlugin ..> FileSystem : uses
Svg ..> FileSystem : uses
Flow diagram for build and runtime usage of sprite hash manifestflowchart LR
subgraph Build
A["Webpack build"] --> B["SpriteHashPlugin afterEmit"]
B --> C["Compute hashes for dist/icons svg files"]
C --> D["Write dist/sprite-hashes.json"]
C --> E["Output dist/icons sprite svg files"]
end
subgraph Runtime
F["Theme templates call Svg service"] --> G["Svg.get_sprite_hash reads sprite-hashes.json"]
G --> H["Svg.get_the_icon builds sprite url with ?hash"]
H --> I["Browser requests dist/icons sprite.svg?hash"]
end
D --> G
E --> I
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- In
Svg::get_sprite_hash, the JSON file is read and decoded on every call; consider caching the decoded hash map in a property (or memoizing per request) to avoid repeated disk I/O and JSON parsing when many icons are rendered on a page. - The key used for lookup in
get_sprite_hash(sprintf('icons/%s.svg', $sprite_name)) is duplicated multiple times; computing it once and reusing the variable would simplify the logic and reduce the chance of typos if the format changes. - The webpack
SpriteHashPluginusesconsole.log/console.warnand synchronous fs calls insideafterEmit.tapAsync; consider switching tocompiler.getInfrastructureLoggerfor logging and wrapping fs operations in try/catch with propercallback(err)handling to avoid noisy output or silent failures in builds.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `Svg::get_sprite_hash`, the JSON file is read and decoded on every call; consider caching the decoded hash map in a property (or memoizing per request) to avoid repeated disk I/O and JSON parsing when many icons are rendered on a page.
- The key used for lookup in `get_sprite_hash` (`sprintf('icons/%s.svg', $sprite_name)`) is duplicated multiple times; computing it once and reusing the variable would simplify the logic and reduce the chance of typos if the format changes.
- The webpack `SpriteHashPlugin` uses `console.log`/`console.warn` and synchronous fs calls inside `afterEmit.tapAsync`; consider switching to `compiler.getInfrastructureLogger` for logging and wrapping fs operations in try/catch with proper `callback(err)` handling to avoid noisy output or silent failures in builds.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements a webpack plugin that generates a JSON file containing content hashes for SVG sprite files.
This allows for cache busting of sprite files by appending the hash as a query parameter to the sprite URL.
The
Svgservice is updated to read the hash from the generated JSON and append it to the sprite URL.{ "icons/social.svg": "75b76133", "icons/sprite.svg": "95c11cc9" }Summary by Sourcery
Add cache-busting support for SVG sprite icons using a generated hash manifest.
New Features:
Enhancements: